<template>
	<view class="apply flex flex--row">
		<!-- <navBar></navBar> -->
		<view class="apply_con">
			<image :src="back" mode="aspectFill" style="height:76%;"></image>
			<view class="apply_con_btn" @click="goApplyOrderReceiver">申请成为接单员</view>
			<view style="display: flex;justify-content: center;">
				<checkbox-group @change="checkAgree">
					<checkbox :checked="isAgree"></checkbox>
				</checkbox-group>
				<view @tap="showModal=true">已阅读并同意<text class="bookStyle">天菜陪玩合作承诺书</text></text></view>
			</view>
		</view>
		<view class="modalWrapper" v-if="showModal">
			<view class="modalWrapper_content">
				<view class="modalWrapper_title">
					<view></view>
					<view style="color: #504f4f;font-size: 18px;font-weight: 600;">合作承诺书</view>
					<view class="iconfont icon-guanbi" style="position: absolute;right: 0%;" @tap="showModal=false">
					</view>
				</view>
				<view class="modalWrapper_main">
					<view class="modalWrapper_agreement">
						一、天菜陪玩平台五大纪律高压线:<br />
							1.禁止接未经天菜陪玩平台确认的订单(包括不仅限于陪玩与平台用户私下约见/转账等行为)。<br />
							2.禁止私下收取用户金钱及礼品(礼品市价大于200元的)。<br />
							3.禁止有肢体接触,言语粗俗等不礼貌及不雅行为。<br />
							4.禁止私密空间接单(KTV、酒店、私人影院、私人会所、住宅、私家车)，每个见面地点及时准确报备客服人员。<br />
							5.禁止陪玩在接单时间段内失联、醉酒，禁止接待已严重醉酒用户。<br />
						二、天菜陪玩声明:天菜陪玩平台与申请人是合作关系，申请人有权利自由把控自己的时间和行为，但要求在接单期间务必严格遵守平台纪律。平台承诺对申请人提供常规绿色陪玩订单信息，严禁申请人违反以上五条纪律高压线!违反以上任意一条，开除平台，扣除所有分成，情节恶劣者平台配合公安机关给予法律处分!<br />
						三、陪玩个人声明:<br />
						1.我愿意遵从天菜陪玩平台规则约束，既维护平台健康绿色，同时也能保障自己人身安全。<br />
						2.我保证到天菜陪玩平台入驻前，与其它单位或平台无任何违法记录，也不存在任何劳资纠纷。<br />
						3.我保证接受平台各项合法制度条款，提高自身品质修养，接单过程中拒绝任何非平台收入，若违反，我愿意自己承担一切责任和后果。<br />
					</view>
					<view class="modalWrapper_btn">
						<view class="modalWrapper_funBtn modalWrapper_funBtn_calcel" @tap="showModal=false">取消</view>
						<view class="modalWrapper_funBtn modalWrapper_funBtn_confirm" @tap="confirmAgreet()">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				back: 'https://qw.lvd8.cn/images/recruit.png',
				showModal: false,
				isAgree: false
			}
		},
		onLoad() {
			//this.getBackground()
		},
		computed: {
			...mapState(['baseUrl'])
		},
		methods: {
			confirmAgreet() {
				this.isAgree = true
				this.showModal = false
			},
			checkAgree(e) {
				this.isAgree = !this.isAgree
				console.log(this.isAgree)
			},
			// 背景图
			async getBackground() {
				const data = await this.$http('/appapi/system/info', {
					type: 6
				})
				this.back = data.content
			},
			// 进入申请接单师
			goApplyOrderReceiver() {
				if(this.isAgree){
					uni.navigateTo({
						url: '/pages/applyOrderReceiver/applyOrderReceiver'
					})
				}else{
					uni.showToast({
						title:"请阅读并同意陪玩入驻协议",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bookStyle ::before{
		display: inline;
		content: "《"
	}
	.bookStyle ::after{
		display: inline;
		content: "》"
	}
	.apply {
		height: 100%;

		.apply_con {
			flex: 1;
			position: relative;
			// margin: 30rpx 0;
			image {
				width: 100%;
				height: 100%;
			}

			.apply_con_btn {
				width: 80vw;
				height: 104rpx;
				line-height: 104rpx;
				text-align: center;
				background: #FA97B4;
				font-size: 38rpx;
				margin: 20rpx auto;
				color: #fff;
				border-radius: 52rpx;
			}
		}
	}

	// 模态框样式
	.modalWrapper {
		// width: 100vw;
		// position: fixed;
		// top: 0;
		// background-color: rgba(0, 0, 0, 0.5);
		// height: 100vh;
		// z-index: 200;
		// left: 0;
		width: 100vw;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;
		z-index: 200;
		left: 0;
		display: flex;
		box-sizing: border-box;
	}

	.modalWrapper_content {
		width: 82%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		min-height: 60vh;
		margin: auto;
	}

	.modalWrapper_text {
		padding: 30rpx 0;
		color: #686868;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		gap: 20rpx;
	}
	.modalWrapper_agreement {
		min-height: 650rpx;
		max-height: 670rpx;
		padding: 20rpx 0;
		overflow-y: scroll;
		margin: 30rpx 0;
	}

	.modalWrapper_btn {
		display: flex;
		justify-content: space-between;
	}

	.modalWrapper_funBtn {
		width: 200rpx;
		border-radius: 25rpx;
		text-align: center;
		font-size: 25rpx;
		padding: 10rpx;
	}

	.modalWrapper_funBtn_calcel {
		border: 1px solid #ECECEC;
		color: #9A9A9A;
	}

	.modalWrapper_funBtn_confirm {
		// border: 1px solid #ECECEC;
		color: #fff;
		background-color: #FA97B4;
	}

	.modalWrapper_title {
		text-align: center;
		display: flex;
		position: relative;
		margin: 15rpx 0;
	}
</style>